import React, { Component } from 'react';
import { Carousel } from 'antd-mobile';

import { getxq } from '@/api/http';

import { XaingCss } from './style';
import a from '../../session';

class Xiangqing extends Component {
    state = {
        item: []
    }
    async componentDidMount() {
        let id = this.props.match.params.id
        let data = await getxq()
        this.setState(() => ({
            item: data.data.wapGoods[id]
        }))
        document.querySelector(".slider-frame").style.height = '100vw'
    }
    gwc = (item) => {
        item.checked = false
        let car = a.get('car') || [];
        let it = car.filter(a => a.productSn === item.productSn)
        if (it.length > 0) {
            console.log(car);
            let newcar = car.map(a => {
                if (a.productSn === item.productSn) {
                    a.count += 1
                }
                return a
            })
            a.set('car', newcar)
        } else {
            item.count = 1
            car.push(item)
            a.set('car', car)
        }
        alert('加入购物车成功')
    }
    fanhui = () => {
        this.props.history.go(-1)
    }
    render() {
        return (
            <XaingCss>
                <div onClick={() => this.fanhui()} className='fanhui iconfont icon-right'></div>
                <div className='pic_box'>
                    <Carousel
                        autoplay={false}
                        infinite
                    >
                        <img src={this.state.item.pic} alt="" />
                        <img src="https://pic.flyco.net.cn/mall/goods/FS927/main/3_1611048774143.jpg" alt="" />
                        <img src="https://pic.flyco.net.cn/mall/goods/FS927/main/8_1611048774019.jpg" alt="" />
                    </Carousel>
                </div>
                <div className='sp_xq'>
                    <span>{this.state.item.subTitle}</span>
                </div>
                <div className='sp_name'>
                    <div className='jiage'>
                        <span>￥{this.state.item.promotionPrice}</span>
                        <s>￥{this.state.item.originalPrice}</s>
                        <div className='fenx'>
                            <img src="https://m.flyco.com/aliyun/images/icon/share.png" alt="" />
                            <span>分享</span>
                        </div>
                    </div>
                    <p>{this.state.item.name}</p>
                </div>
                <div className='yixuan'>
                    <div className='text'>
                        <span className='p1'>已选</span>
                        <span className='p2'>{this.state.item.name}×1件</span>
                        <span className='p3'>></span>
                    </div>
                    <div className='pic_info'>
                        <div className='infoBox'>
                            <img src="https://m.flyco.com/aliyun/images/home/mark.png" alt="" />
                            <span>顺丰包邮</span>
                        </div>
                        <div className='infoBox'>
                            <img src="https://m.flyco.com/aliyun/images/home/mark.png" alt="" />
                            <span>官方正品保障</span>
                        </div>
                        <div className='infoBox'>
                            <img src="https://m.flyco.com/aliyun/images/home/mark.png" alt="" />
                            <span>两年全国联保</span>
                        </div>
                        <div className='infoBox'>
                            <img src="https://m.flyco.com/aliyun/images/home/mark.png" alt="" />
                            <span>7天无忧退换货</span>
                        </div>
                        <div className='infoBox'>
                            <img src="https://m.flyco.com/aliyun/images/home/mark.png" alt="" />
                            <span>24小时发货</span>
                        </div>
                    </div>
                </div>
                <div className='infoPic'>
                    <p>商品详情</p>
                    <div className='img'>
                        <img src="https://pic.flyco.net.cn/mall/goods/FS927/info/927qie_01_1611048499981.jpg" alt="" />
                    </div>
                </div>
                <div className='foot'>
                    <div>
                        <span className='iconfont icon-gouwuche1'></span>
                        <div>购物车</div>
                    </div>
                    <div>
                        <span className='iconfont icon-sousuo'></span>
                        <div>消息</div>
                    </div>
                    <div className='btn'>
                        <span className='che' onClick={() => this.gwc(this.state.item)}>加入购物车</span>
                        <span className='mai'>立即购买</span>
                    </div>
                </div>
            </XaingCss>
        );
    }
}

export default Xiangqing;
